<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    :size="size"
    :before-close="modelClose"
    :wrapper-closable="false"
  >
    <div class="box-top">
      <div class="headPhoto">
        <el-image style="width: 75px; height: 75px" src="https://xinmengyiliao.oss-cn-beijing.aliyuncs.com/temp/组8323x_1668073521001_1670469639215.png" fit="fill" />
      </div>
      <div class="titleInfo">
        <div class="name">武汉市硚口区社会福利院</div>
        <div>12420104707178080G</div>
      </div>
      <div class="tag">
        <el-tag size="small" effect="plain" color="#e8f4ff">5级</el-tag>
      </div>
    </div>
    <div class="box-bottom">
      <simpleInfoCard v-for="(item1,index) in 10" :key="index" title="基本信息">
        <template slot="contents">
          <div class="contents">
            <el-row>
              <el-col :span="12" class="col">
                <div class="label">统一社会代码：</div>
                <div class="value">12420104707178080G</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">经营状态：</div>
                <div class="value">正常营业</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" class="col">
                <div class="label">单位名称：</div>
                <div class="value">武汉市硚口区社会福利院</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">建成日期：</div>
                <div class="value">2020-12-31</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" class="col">
                <div class="label">所属行政区划：</div>
                <div class="value">硚口区</div>
              </el-col>
            </el-row>
          </div>
        </template>
      </simpleInfoCard>
    </div>
  </el-drawer>
</template>

<script>
import simpleInfoCard from '@/components/xm/simpleInfoCard'
export default {
  components: {
    simpleInfoCard
  },
  props: {},
  data() {
    return {
      model: {},
      title: '',
      size: '50%',
      visible: false
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    show(rowData) {
      this.visible = true
      this.model = { ...rowData }
    },
    modelClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
// 内容超长启用滚动条
::v-deep .el-drawer__body {
  overflow: auto;
  padding: 24px;
  .box-top{
    display: flex;
    justify-content: flex-start;
    padding: 0 0 10px;
    border-bottom: 1px #dcdfe6 solid;
    .headPhoto{
      border-radius: 50%;
    }
    .titleInfo{
      margin: 0 20px;
      color: #333;
      .name{
        font-weight: 700;
        font-size: 20px;
        padding: 10px 0 20px;
      }
    }
    .tag{
      padding-top: 9px;
      .el-tag--small{
        padding: 0 18px;
      }
    }
  }
  .box-bottom{
    margin-top: 16px;
    .contents{
      .col{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 16px;
        .label{
          color: #666;
        }
        .value{
          margin-left: 5px;
          color: #333;
        }
      }
    }
  }
}
// 隐藏滚动条, 隐藏后仍然可以滚动
// ::v-deep .el-drawer__container ::-webkit-scrollbar{
//     display: none;
// }
</style>
